<script setup>
import { computed } from 'vue'

const props = defineProps({
  pageType: {
    type: String,
    required: true
  }
})

const topicsByPage = {
  chat: [
    '你能做什么？',
    '给我讲个笑话',
    '写一首关于春天的诗',
    '如何提高英语口语？',
    '解释量子力学的基本原理'
  ],
  weather: [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州'
  ],
  knowledge: [
    '这个文档主要讲了什么？',
    '总结一下文档的关键内容',
    '文档中有哪些重要的观点？',
    '提取文档中的主要结论',
    '根据文档回答特定问题'
  ],
  meeting: [
    '总结这次会议的要点',
    '提取会议中的行动项目',
    '整理会议中的决策事项',
    '生成会议纪要',
    '提取与项目相关的关键信息'
  ],
  task: [
    '创建一个明天下午3点的会议提醒',
    '添加一个周五截止的项目任务',
    '设置每周健身提醒',
    '创建购物清单任务',
    '安排下周的工作计划'
  ],
  health: [
    '如何保持良好的睡眠质量？',
    '推荐一些健康的早餐选择',
    '久坐办公室如何保护颈椎？',
    '缓解压力的方法有哪些？',
    '如何科学安排运动计划？'
  ]
}

const topics = computed(() => {
  return topicsByPage[props.pageType] || []
})

const containerClass = computed(() => {
  switch (props.pageType) {
    case 'chat':
      return 'bg-gradient-to-br from-blue-50 to-indigo-50'
    case 'knowledge':
      return 'bg-gradient-to-br from-purple-50 to-pink-50'
    case 'meeting':
      return 'bg-gradient-to-br from-green-50 to-teal-50'
    case 'task':
      return 'bg-gradient-to-br from-green-50 to-emerald-50'
    case 'health':
      return 'bg-gradient-to-br from-amber-50 to-orange-50'
    case 'weather':
      return 'bg-gradient-to-br from-sky-50 to-cyan-50'
    default:
      return 'bg-gray-50'
  }
})

const titleClass = computed(() => {
  switch (props.pageType) {
    case 'chat':
      return 'text-blue-800'
    case 'knowledge':
      return 'text-purple-800'
    case 'meeting':
      return 'text-green-800'
    case 'task':
      return 'text-green-800'
    case 'health':
      return 'text-amber-800'
    case 'weather':
      return 'text-sky-800'
    default:
      return 'text-gray-800'
  }
})

const iconClass = computed(() => {
  switch (props.pageType) {
    case 'chat':
      return 'text-blue-500 animate-pulse'
    case 'knowledge':
      return 'text-purple-500 animate-bounce'
    case 'meeting':
      return 'text-green-500 animate-pulse'
    case 'task':
      return 'text-green-500 animate-spin'
    case 'health':
      return 'text-amber-500 animate-pulse'
    case 'weather':
      return 'text-sky-500 animate-bounce'
    default:
      return 'text-red-500'
  }
})

const buttonClass = computed(() => {
  switch (props.pageType) {
    case 'chat':
      return 'bg-white hover:bg-blue-100 text-blue-700 border-blue-200 hover:border-blue-300 hover:shadow-blue-lg'
    case 'knowledge':
      return 'bg-white hover:bg-purple-100 text-purple-700 border-purple-200 hover:border-purple-300 hover:shadow-purple-lg'
    case 'meeting':
      return 'bg-white hover:bg-green-100 text-green-700 border-green-200 hover:border-green-300 hover:shadow-green-lg'
    case 'task':
      return 'bg-white hover:bg-green-100 text-green-700 border-green-200 hover:border-green-300 hover:shadow-green-lg'
    case 'health':
      return 'bg-white hover:bg-amber-100 text-amber-700 border-amber-200 hover:border-amber-300 hover:shadow-amber-lg'
    case 'weather':
      return 'bg-white hover:bg-sky-100 text-sky-700 border-sky-200 hover:border-sky-300 hover:shadow-sky-lg'
    default:
      return 'bg-white hover:bg-gray-100 text-gray-700 border-gray-200 hover:border-gray-300'
  }
})
</script>

<template>
  <div class="bg-gray-50 rounded-lg p-6 sticky top-0" :class="containerClass">
    <h3 class="text-2xl font-bold mb-6 flex items-center gap-2" :class="titleClass">
      <i class="fa fa-fire text-2xl" :class="iconClass"></i>
      热门查询
    </h3>
    <div class="flex flex-col gap-3">
      <button
        v-for="topic in topics"
        :key="topic"
        class="topic-button px-4 py-3 rounded-lg text-lg text-left border transition-all duration-300 transform hover:scale-102"
        :class="buttonClass"
        @click="$emit('select-topic', topic)"
      >
        {{ topic }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.topic-button {
  transition: all 0.3s ease;
}

.topic-button:hover {
  transform: translateX(8px);
}

@keyframes glow {
  0% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
  100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
}

.shadow-blue-lg {
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
}

.shadow-purple-lg {
  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.1), 0 2px 4px -1px rgba(147, 51, 234, 0.06);
}

.shadow-green-lg {
  box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.1), 0 2px 4px -1px rgba(34, 197, 94, 0.06);
}

.shadow-amber-lg {
  box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.1), 0 2px 4px -1px rgba(245, 158, 11, 0.06);
}

.shadow-sky-lg {
  box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.1), 0 2px 4px -1px rgba(14, 165, 233, 0.06);
}

.scale-102 {
  scale: 1.02;
}
</style> 